<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商城</title>
    <meta name="keywords" content="商城" />
    <meta name="description" content="商城" />
    <link rel="stylesheet" href="./css/resetv2.css" />
    <link rel="stylesheet" href="./fonts/iconfont.css" />
    <!-- global css文件中有可能重写iconfont中的字体颜色 -->
    <link rel="stylesheet" href="./css/global.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/index.css" />

    <style></style>
  </head>
  <body>
    <!-- header start topNavigation -->

    <header class="header">
      <!-- site-topbar start -->
      <div class="site-topbar">
        <div class="topbar-flex container">
          <!-- topbar-nav start -->
          <nav class="topbar-nav">
            <ul>
              <li><a href="#">手机商城</a></li>
              <li><a href="#">MINI</a></li>
              <li><a href="#">IoT</a></li>
              <li class="submenu">
                <a href="#">云服务</a>
                <div class="submenu-list">
                  <ul>
                    <li>
                      <a href="#">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shoujizhuti_08tongxunlu"></use>
                        </svg>
                        通讯录
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shoujizhuti_05duanxin"></use>
                        </svg>
                        短信
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shoujizhuti_03xiangce"></use>
                        </svg>
                        云相册
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shoujizhuti_25xiazai"></use>
                        </svg>
                        手机云盘
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shoujizhuti_15bianqian"></use>
                        </svg>
                        笔记（便签）
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li><a href="#">手机数科</a></li>
              <li><a href="#">升品</a></li>
              <!-- 智能开发平台的 class="submenu" 去掉 -->
              <li><a href="#">智能开发平台</a></li>
              <li><a href="#">企业团购</a></li>
              <li><a href="#">资质证照</a></li>
              <li><a href="#">协议规则</a></li>
              <li class="submenu">
                <a href="#">下载app</a>
                <div class="download">
                  <img src="./images/qr.png" alt="QR" width="87px" height="87px" />
                  <p>手机商城APP</p>
                </div>
              </li>
              <li><a href="#">智能生活</a></li>
              <li><a href="#">Melect Nocation</a></li>
            </ul>
          </nav>
          <!-- topbar-nav end -->
          <!-- top-wrap start -->
          <div class="top-wrap">
            <div class="topbar-info">
              <a href="#">登录</a>
              <a href="#">注册</a>
              <a href="#">消息通知</a>
            </div>
            <div class="topbar-cart">
              <a href="#">
                <span class="iconfont icon-gouwuche1"></span>
                购物车（0）
              </a>
              <div class="cart-menu">购物车中还没有商品，赶紧选购吧！</div>
            </div>
          </div>
          <!-- top-wrap end -->
        </div>
      </div>
      <!-- site-topbar end -->

      <!-- site-header start -->
      <div class="site-header">
        <div class="container header-container">
          <!-- header-logo start -->
          <div class="header-logo">
            <!-- 为了seo -->
            <h1>商城</h1>
            <a href="#"><img src="./images/logo.png" alt="logo" width="48px" height="56px" /></a>
          </div>
          <!-- header-logo end  -->

          <!-- header-nav start -->
          <div class="header-nav">
            <ul>
              <li><a href="#">Minini手机</a></li>
              <li><a href="#">Pidmi手机</a></li>
              <li><a href="#">电视</a></li>
              <li><a href="#">笔记本</a></li>
              <li><a href="#">平板</a></li>
              <li><a href="#">家电</a></li>
              <li><a href="#">路由器</a></li>
              <li><a href="#">服务中心</a></li>
              <li><a href="#">社区</a></li>
            </ul>
          </div>
          <!-- header-nav end  -->

          <!-- header-search start -->
          <div class="header-search">
            <form action="#" method="get">
              <div class="search">
                <input type="text" id="J_input-search" name="search" class="search-text" placeholder="手机" />
                <button type="submit" name="search-button" class="search-button iconfont icon-fangdajing"></button>
                <div class="keyword-list" id="J_keyword-list">
                  <ul>
                    <li><a href="#">手机换新</a></li>
                    <li><a href="#">空调</a></li>
                    <li><a href="#">充电宝</a></li>
                    <li><a href="#">风扇Redmi K80</a></li>
                    <li><a href="#">显示器</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">空气净化器</a></li>
                  </ul>
                </div>
              </div>
            </form>
          </div>
          <!-- header-search end -->
        </div>
      </div>
      <!-- site-header end -->
    </header>

    <!-- header end -->

    <!-- main start -->
    <main>
      <!-- 轮播图 start  -->

      <section class="page1 container">
        <!-- swiper 轮播图 start -->

        <div class="swiper swiper1" id="swiper1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="https://dummyimage.com/1226x460/000/fff.jpg&text=%20%20%20%20%20%20+Slide+1" alt="slide1" class="img-cover" />
            </div>
            <div class="swiper-slide">
              <img src="https://dummyimage.com/1226x460/000/fff.jpg&text=%20%20%20%20%20%20+Slide+2" alt="slide2" class="img-cover" />
            </div>
            <div class="swiper-slide">
              <img src="https://dummyimage.com/1226x460/000/fff.jpg&text=%20%20%20%20%20%20+Slide+3" alt="slide3" class="img-cover" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <!-- swiper 轮播图 end -->

        <!-- 左侧产品分类菜单 category start -->
        <nav class="category">
          <ul>
            <li>
              <a href="#">手机</a>
              <div class="category-item">
                <a href="#">
                  <img src="images/grid-mi-01.webp" width="40" alt="image" />
                  黑鲨5 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-02.webp" width="40" alt="image" />
                  黑鲨5
                </a>
                <a href="#">
                  <img src="images/grid-mi-03.webp" width="40" alt="image" />
                  Redmi 10A
                </a>
                <a href="#">
                  <img src="images/grid-mi-04.webp" width="40" alt="image" />
                  Redmi K50 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-05.webp" width="40" alt="image" />
                  Redmi K50
                </a>
                <a href="#">
                  <img src="images/grid-mi-06.webp" width="40" alt="image" />
                  Redmi K40S
                </a>
                <a href="#">
                  <img src="images/grid-mi-07.webp" width="40" alt="image" />
                  黑鲨5 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-08.webp" width="40" alt="image" />
                  黑鲨5
                </a>
                <a href="#">
                  <img src="images/grid-mi-09.webp" width="40" alt="image" />
                  Redmi 10A
                </a>
                <a href="#">
                  <img src="images/grid-mi-10.webp" width="40" alt="image" />
                  Redmi K50 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-11.webp" width="40" alt="image" />
                  Redmi K50
                </a>
                <a href="#">
                  <img src="images/grid-mi-12.webp" width="40" alt="image" />
                  Redmi K40S
                </a>
                <a href="#">
                  <img src="images/grid-mi-01.webp" width="40" alt="image" />
                  黑鲨5 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-02.webp" width="40" alt="image" />
                  黑鲨5
                </a>
                <a href="#">
                  <img src="images/grid-mi-03.webp" width="40" alt="image" />
                  Redmi 10A
                </a>
                <a href="#">
                  <img src="images/grid-mi-04.webp" width="40" alt="image" />
                  Redmi K50 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-05.webp" width="40" alt="image" />
                  Redmi K50
                </a>
                <a href="#">
                  <img src="images/grid-mi-06.webp" width="40" alt="image" />
                  Redmi K40S
                </a>
                <a href="#">
                  <img src="images/grid-mi-07.webp" width="40" alt="image" />
                  黑鲨5 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-08.webp" width="40" alt="image" />
                  黑鲨5
                </a>
                <a href="#">
                  <img src="images/grid-mi-09.webp" width="40" alt="image" />
                  Redmi 10A
                </a>
                <a href="#">
                  <img src="images/grid-mi-10.webp" width="40" alt="image" />
                  Redmi K50 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-11.webp" width="40" alt="image" />
                  Redmi K50
                </a>
                <a href="#">
                  <img src="images/grid-mi-12.webp" width="40" alt="image" />
                  Redmi K40S
                </a>
              </div>
            </li>
            <li>
              <a href="#">电视</a>
              <div class="category-item">
                <a href="#">
                  <img src="images/grid-mi-01.webp" width="40" alt="image" />
                  黑鲨5 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-02.webp" width="40" alt="image" />
                  黑鲨5
                </a>
                <a href="#">
                  <img src="images/grid-mi-03.webp" width="40" alt="image" />
                  Redmi 10A
                </a>
                <a href="#">
                  <img src="images/grid-mi-04.webp" width="40" alt="image" />
                  Redmi K50 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-05.webp" width="40" alt="image" />
                  Redmi K50
                </a>
                <a href="#">
                  <img src="images/grid-mi-06.webp" width="40" alt="image" />
                  Redmi K40S
                </a>
                <a href="#">
                  <img src="images/grid-mi-07.webp" width="40" alt="image" />
                  黑鲨5 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-08.webp" width="40" alt="image" />
                  黑鲨5
                </a>
                <a href="#">
                  <img src="images/grid-mi-09.webp" width="40" alt="image" />
                  Redmi 10A
                </a>
                <a href="#">
                  <img src="images/grid-mi-10.webp" width="40" alt="image" />
                  Redmi K50 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-11.webp" width="40" alt="image" />
                  Redmi K50
                </a>
                <a href="#">
                  <img src="images/grid-mi-12.webp" width="40" alt="image" />
                  Redmi K40S
                </a>
                <a href="#">
                  <img src="images/grid-mi-01.webp" width="40" alt="image" />
                  黑鲨5 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-02.webp" width="40" alt="image" />
                  黑鲨5
                </a>
                <a href="#">
                  <img src="images/grid-mi-03.webp" width="40" alt="image" />
                  Redmi 10A
                </a>
                <a href="#">
                  <img src="images/grid-mi-04.webp" width="40" alt="image" />
                  Redmi K50 Pro
                </a>
                <a href="#">
                  <img src="images/grid-mi-05.webp" width="40" alt="image" />
                  Redmi K50
                </a>
                <a href="#">
                  <img src="images/grid-mi-06.webp" width="40" alt="image" />
                  Redmi K40S
                </a>
              </div>
            </li>
            <li><a href="#">笔记本 平板</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">出行 穿戴</a></li>
            <li><a href="#">智能 路由器</a></li>
            <li><a href="#">电源 配件</a></li>
            <li><a href="#">健康 儿童</a></li>
            <li><a href="#">耳机 音箱</a></li>
            <li><a href="#">生活 箱包</a></li>
          </ul>
        </nav>
        <!-- 左侧产品分类菜单 category end -->
      </section>

      <!-- 轮播图 end  -->

      <!-- 推荐歌单 start -->

      <section class="page2">
        <!-- recommend-banner start  -->
        <div class="recommend-banner container">
          <a href="#">
            <img src="./images/banner.png" alt="banner" width="1226px" height="120px" />
          </a>
        </div>
        <!-- recommend-banner end  -->

        <!-- recommand-music start  -->
        <div class="recommand-music container">
          <h2 class="music-title">歌 单 推 荐</h2>
          <!-- 选项卡 -->
          <div class="music-tabs">
            <ul class="tab-header" id="J_tab-header">
              <li class="active">为你推荐</li>
              <li>官方歌单</li>
              <li>情歌</li>
              <li>网络歌曲</li>
              <li>经典KTV</li>
              <li>热歌</li>
            </ul>
            <!-- 歌单内容列表 -->
            <div class="tab-content" id="J_tab-content">
              <div class="tab-content-item active">
                <ul class="music-list">
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist7.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist11.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist8.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist9.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist10.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="tab-content-item">
                <ul class="music-list">
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist1.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist2.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist3.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist4.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist5.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="tab-content-item">
                <ul class="music-list">
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist7.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist11.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist8.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist9.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist10.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="tab-content-item">
                <ul class="music-list">
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist1.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist2.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist3.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist4.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist5.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="tab-content-item">
                <ul class="music-list">
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist7.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist11.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist8.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist9.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist10.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="tab-content-item">
                <ul class="music-list">
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist1.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist2.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist3.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist4.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="img">
                        <img src="./images/playlist5.png" alt="item-cover" class="img-cover" />
                        <span class="iconfont icon-play"></span>
                      </div>
                      <a href="#"><p class="title ellipsis-single-line">拒绝不开心丨rap情歌甜到你发晕</p></a>
                      <p class="play-count">播放量：146.1万</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- recommand-music end  -->
      </section>

      <!-- 推荐歌单 end -->

      <!-- 家居产品 start  -->

      <section class="page3">
        <div class="recommand-products container">
          <div class="product-header">
            <div class="title">
              <h2>自在游乐 健康成长</h2>
              <p>
                大人过大年，小朋友也有小乐趣。改造房间，给小朋友准备一个“游乐场”，无论是准备带着小朋友回家，还是就地过年，都可以享受
                闲适的亲子时光。
              </p>
            </div>
            <a href="#" class="more-button">更多儿童产品</a>
          </div>

          <div class="product-content">
            <div class="product-item">
              <img src="./images/childProduct1.png" alt="product-image" class="img-cover" />
              <div class="dot dot1">
                <div class="dot-tips">
                  <p class="title ellipsis-single-line">DUNDRA 敦德拉</p>
                  <p class="desc ellipsis-multi-line2">带储物空间的活动桌</p>
                  <p class="price">
                    <i>￥</i>
                    <span>999</span>
                    <i>.00</i>
                  </p>
                </div>
              </div>

              <div class="dot dot2">
                <div class="dot-tips">
                  <p class="title ellipsis-single-line">DUNDRA 敦德拉</p>
                  <p class="desc ellipsis-multi-line2">带储物空间的活动桌</p>
                  <p class="price">
                    <i>￥</i>
                    <span>999</span>
                    <i>.00</i>
                  </p>
                </div>
              </div>

              <div class="dot dot3">
                <div class="dot-tips">
                  <p class="title ellipsis-single-line">DUNDRA 敦德拉</p>
                  <p class="desc ellipsis-multi-line2">带储物空间的活动桌</p>
                  <p class="price">
                    <i>￥</i>
                    <span>999</span>
                    <i>.00</i>
                  </p>
                </div>
              </div>
            </div>
            <div class="product-item">
              <img src="./images/childProduct2.png" alt="product-image" class="img-cover" />
              <div class="dot dot4">
                <div class="dot-tips">
                  <p class="title ellipsis-single-line">DUNDRA 敦德拉</p>
                  <p class="desc ellipsis-multi-line2">带储物空间的活动桌</p>
                  <p class="price">
                    <i>￥</i>
                    <span>999</span>
                    <i>.00</i>
                  </p>
                </div>
              </div>
            </div>
            <div class="product-item">
              <img src="./images/childProduct4.png" alt="product-image" class="img-cover" />
              <div class="dot dot5">
                <div class="dot-tips">
                  <p class="title ellipsis-single-line">DUNDRA 敦德拉</p>
                  <p class="desc ellipsis-multi-line2">带储物空间的活动桌</p>
                  <p class="price">
                    <i>￥</i>
                    <span>999</span>
                    <i>.00</i>
                  </p>
                </div>
              </div>
            </div>
            <div class="product-item"><img src="./images/childProduct3.png" alt="product-image" class="img-cover" /></div>
            <div class="product-item"><img src="./images/childProduct5.png" alt="product-image" class="img-cover" /></div>
          </div>
        </div>
      </section>

      <!-- 家居产品 end  -->

      <!-- 精彩视频 start -->

      <section class="page4">
        <div class="recommend-video container">
          <h2 class="title">手机商城 - 精彩视频</h2>
          <div class="video-list">
            <div class="video-item">
              <div class="img-container" data-video-url="http://www.w3school.com.cn/example/html5/mov_bbb.mp4">
                <img src="./images/mobileStore01.png" alt="video-cover" class="img-cover" />
                <span class="iconfont icon-play-circle"></span>
              </div>
              <p class="title">
                <a href="javascript:;" title="detail">巨族 18X</a>
              </p>
            </div>
            <div class="video-item">
              <div class="video-item">
                <div class="img-container" data-video-url="http://vjs.zencdn.net/v/oceans.mp4">
                  <img src="./images/mobileStore02.png" alt="video-cover" class="img-cover" />
                  <span class="iconfont icon-play-circle"></span>
                </div>
                <p class="title">
                  <a href="javascript:;" title="detail">巨族 18 Pro</a>
                </p>
              </div>
            </div>
            <div class="video-item">
              <div class="video-item">
                <div class="img-container" data-video-url="https://media.w3.org/2010/05/sintel/trailer.mp4">
                  <img src="./images/mobileStore03.png" alt="video-cover" class="img-cover" />
                  <span class="iconfont icon-play-circle"></span>
                </div>
                <p class="title">
                  <a href="javascript:;" title="detail">巨族 18</a>
                </p>
              </div>
            </div>
            <div class="video-item">
              <div class="video-item">
                <div class="img-container" data-video-url="http://www.w3school.com.cn/example/html5/mov_bbb.mp4">
                  <img src="./images/mobileStore05.png" alt="video-cover" class="img-cover" />
                  <span class="iconfont icon-play-circle"></span>
                </div>
                <p class="title">
                  <a href="javascript:;" title="detail">Lipro 智能家居</a>
                </p>
              </div>
            </div>
            <div class="video-item">
              <div class="video-item">
                <div class="img-container" data-video-url="http://vjs.zencdn.net/v/oceans.mp4">
                  <img src="./images/mobileStore06.png" alt="video-cover" class="img-cover" />
                  <span class="iconfont icon-play-circle"></span>
                </div>
                <p class="title">
                  <a href="javascript:;" title="detail">Plyme 9 功能视频</a>
                </p>
              </div>
            </div>
            <div class="video-item">
              <div class="video-item">
                <div class="img-container" data-video-url="https://media.w3.org/2010/05/sintel/trailer.mp4">
                  <img src="./images/mobileStore07.png" alt="video-cover" class="img-cover" />
                  <span class="iconfont icon-play-circle"></span>
                </div>
                <p class="title">
                  <a href="javascript:;" title="detail">Plyme 8 概念视频</a>
                </p>
              </div>
            </div>
            <div class="video-item">
              <div class="video-item">
                <div class="img-container" data-video-url="http://www.w3school.com.cn/example/html5/mov_bbb.mp4">
                  <img src="./images/mobileStore08.png" alt="video-cover" class="img-cover" />
                  <span class="iconfont icon-play-circle"></span>
                </div>
                <p class="title">
                  <a href="javascript:;" title="detail">Aicy</a>
                </p>
              </div>
            </div>
            <div class="video-item">
              <div class="video-item">
                <div class="img-container" data-video-url="https://media.w3.org/2010/05/sintel/trailer.mp4">
                  <img src="./images/mobileStore01.png" alt="video-cover" class="img-cover" />
                  <span class="iconfont icon-play-circle"></span>
                </div>
                <p class="title">
                  <a href="javascript:;" title="detail">安全家庭</a>
                </p>
              </div>
            </div>
            <!-- 防御式编程 -->
            <span class="col"></span>
            <span class="col"></span>
          </div>
        </div>
      </section>

      <!-- 弹出播放视频遮罩层 start -->

      <div class="video-mask" id="J_video-mask">
        <div class="video-content">
          <video src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls id="videoElement"></video>
          <span class="close-button" id="J_close-button"></span>
        </div>
      </div>

      <!-- 弹出播放视频遮罩层 end -->

      <!-- 精彩视频 end -->

      <!-- 推荐信息 start  -->

      <section class="page5">
        <div class="recommend-info container">
          <h2 class="title">手机商城 - 推荐信息</h2>
          <div class="recommend-content">
            <div class="item img-cover">
              <a href="javascript:;">
                <div class="item-mask">
                  <img src="./images/info1.png" alt="image" />
                  <div class="recommend-text">
                    <span>产品</span>
                    <p class="title">MINI nova 9 Pro</p>
                    <span>精彩 由我摄定</span>
                    <p class="more">
                      <span>了解更多</span>
                      <i class="iconfont icon-jiantouyou"></i>
                    </p>
                  </div>
                </div>
              </a>
            </div>
            <div class="item img-cover">
              <a href="javascript:;">
                <div class="item-mask">
                  <img src="./images/info2.png" alt="image" />
                  <div class="recommend-text">
                    <span>产品</span>
                    <p class="title">MINI nova 9 Pro</p>
                    <span>精彩 由我摄定</span>
                    <p class="more">
                      <span>了解更多</span>
                      <i class="iconfont icon-jiantouyou"></i>
                    </p>
                  </div>
                </div>
              </a>
            </div>
            <div class="item img-cover">
              <a href="javascript:;">
                <div class="item-mask">
                  <img src="./images/info3.png" alt="image" />
                  <div class="recommend-text">
                    <span>产品</span>
                    <p class="title">MINI nova 9 Pro</p>
                    <span>精彩 由我摄定</span>
                    <p class="more">
                      <span>了解更多</span>
                      <i class="iconfont icon-jiantouyou"></i>
                    </p>
                  </div>
                </div>
              </a>
            </div>
            <div class="item img-cover">
              <a href="javascript:;">
                <div class="item-mask">
                  <img src="./images/info4.png" alt="image" />
                  <div class="recommend-text">
                    <span>产品</span>
                    <p class="title">MINI nova 9 Pro</p>
                    <span>精彩 由我摄定</span>
                    <p class="more">
                      <span>了解更多</span>
                      <i class="iconfont icon-jiantouyou"></i>
                    </p>
                  </div>
                </div>
              </a>
            </div>
            <div class="item img-cover">
              <a href="javascript:;">
                <div class="item-mask">
                  <img src="./images/info5.png" alt="image" />
                  <div class="recommend-text">
                    <span>产品</span>
                    <p class="title">MINI nova 9 Pro</p>
                    <span>精彩 由我摄定</span>
                    <p class="more">
                      <span>了解更多</span>
                      <i class="iconfont icon-jiantouyou"></i>
                    </p>
                  </div>
                </div>
              </a>
            </div>
            <div class="item img-cover">
              <a href="javascript:;">
                <div class="item-mask">
                  <img src="./images/info6.png" alt="image" />
                  <div class="recommend-text">
                    <span>产品</span>
                    <p class="title">MINI nova 9 Pro</p>
                    <span>精彩 由我摄定</span>
                    <p class="more">
                      <span>了解更多</span>
                      <i class="iconfont icon-jiantouyou"></i>
                    </p>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- 推荐信息 end -->

      <!-- 手风琴 start  -->

      <section class="page6">
        <div class="container">
          <div class="logo"><img src="./images/logo-3.png" alt="logo" /></div>
          <!-- 手风琴 start  -->
          <div class="accordion">
            <ul>
              <li>
                <img src="./images/icode6.png" alt="image" />
                <p>开发素材</p>
              </li>
              <li>
                <img src="./images/icode5.png" alt="image" />
                <p>开发素材</p>
              </li>
              <li>
                <img src="./images/icode4.png" alt="image" />
                <p>开发素材</p>
              </li>
              <li>
                <img src="./images/icode3.png" alt="image" />
                <p>开发素材</p>
              </li>
              <li>
                <img src="./images/icode2.png" alt="image" />
                <p>开发素材</p>
              </li>
              <li>
                <img src="./images/icode1.png" alt="image" />
                <p>开发素材</p>
              </li>
            </ul>
          </div>
          <!-- 手风琴 end  -->
        </div>
      </section>

      <!-- 手风琴 end  -->
    </main>
    <!-- main end -->

    <!-- iconfonts  -->
    <script src="./fonts/iconfont.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/index.js"></script>
    <script></script>
  </body>
</html>
